<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<style type="text/css">
    body{
        background: #ddd
    }
    .loginwarrp{
        margin: 70px auto;
        width: 400px;
        padding: 30px 50px;
        background: #FFFFFF;
        overflow: hidden;
        font-size: 14px;
        font-family: '微软雅黑','文泉驿正黑','黑体';
    }
    .loginwarrp .logo{
        width:100%;
        height:44px;
        line-height: 44px;
        font-size: 30px;
        text-align: center;
        border-bottom:1px solid #ddd;
    }
    .loginwarrp .login_form{
        margin-top: 15px;
    }
    .loginwarrp .login_form .login-item{
        padding: 2px 8px;
        border:1px solid #dedede;
        border-radius: 8px;
        margin-top: 10px;
    }
    .loginwarrp .login_form .login_input{
        height: 35px;
        border: none;
        line-height: 35px;
        width: 100px;
        font-size: 14px;
        outline: none;
    }
    .loginwarrp .login_form .verify{
        float: left;
    }
    .loginwarrp .verify .verify_input{
        width: 160px;
    }
    .loginwarrp .verifyimg{
        height: 30px;
        margin: 20px 0 0 20px;
    }
    .loginwarrp .login-sub{
        text-align: center;
    }
    .loginwarrp .login-sub input{
        margin-top:15px;
        background: #45B549;
        line-height: 35px;
        width: 150px;
        color: #FFFFFF;
        font-size: 16px;
        font-family: '微软雅黑','文泉驿正黑','黑体';
        border: none;
        border-radius: 5px;
    }
    .loginwarrp .login_form .login-item .error{
        color: #F00;
        font-family: '微软雅黑','文泉驿正黑','黑体';
    }
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul,li {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    a{
        text-decoration: none;
        color: #333;
        display: block;
    }
    body{
        font-size: 14px;
    }
    .clearfix{
        zoom:1;
    }
    .clearfix:after{
        content:".";
        display:block;
        visibility:hidden;
        height:0;
        clear:both;
    }
    .fl,.l{
        float: left;
    }
    .fr,.r{
        float: right;
    }
    /*margin-top*/
    .mt10{
        margin-top: 10px;
    }
    .mt15{
        margin-top: 15px;
    }
    .mt20{
        margin-top: 20px;
    }
    .mt5{
        margin-top: 5px;
    }
    .mt0{
        margin-top: 0px;
    }
    /*padding-left*/
    .pl15{
        padding-left: 15px;
    }
</style>
<body>
<div class="page">
    <div class="loginwarrp">
        <div class="logo">苏波老师</div>
        <div class="login_form">
        <h1>URL通配符问题，你可以输入任意的url，以.do结束  例如 /asdsad/asdas.do</h1>
            <form id="Login" name="Login" action="login.action" method="post">
                <li class="login-item">
                    <span>用户名：</span>
                    <input type="text" style="height: 28px;" id="username" name="id" class="login_input" placeholder="请输入你的编号">
                    <span id="count-msg" class="error"></span>
                </li>
                <li class="login-item">
                    <span>密　码：</span>
                    <input type="password" style="height: 28px;" id="password" name="password" class="login_input" placeholder="请输入你的密码">
                    <span id="password-msg" class="error"></span>
                </li>
                 <div class="clearfix"></div>
                <li class="login-sub">
                    <input type="submit" name="Submit" value="登录" />
                    <input type="reset" name="Reset" value="重置" />
                </li>
           </form>
        </div>
    </div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        $('#username').focus().blur(checkName);
        $('#password').blur(checkPassword);
    });

    function checkName(){
        var name = $('#username').val();
        if(name == null || name == ""){
            //提示错误
            $('#count-msg').html("用户名不能为空");
            return false;
        }
        var reg = /^\w{3,10}$/;
        if(!reg.test(name)){
            $('#count-msg').html("输入3-10个字母或数字或下划线");
            return false;
        }
        $('#count-msg').empty();
        return true;
    }

    function checkPassword(){
        var password = $('#password').val();
        if(password == null || password == ""){
            //提示错误
            $('#password-msg').html("密码不能为空");
            return false;
        }
        var reg = /^\w{3,10}$/;
        if(!reg.test(password)){
            $('#password-msg').html("输入3-10个字母或数字或下划线");
            return false;
        }
        $('#password-msg').empty();
        return true;
    }
</script>
</body>
</html>